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第 一 章 : FLTK 编 程 模 型 


FLTK(Fast Light Tool Kit 发 音 为 fulltick) 是 一 种 使 用 C++ 开 发 的 GUI 工 具 包 ， 它 可 以 应 用 于 
Unix,Linux,MS-Windows95/98/NT/2000 和 MacOS 操 作 系 统 平台 ， 相 对 于 其 它 的 许多 图 形 接 口 
开发 工具 包 (如 MFC、GTK、QT 等 ) ， 它 具有 体积 很 小 、 速 度 比较 快 ， 且 有 着 更 好 的 移植 
性 。FLTK(Fast Light Тоо! Kit 发 音 为 fulltick) 是 一 种 使 用 C++ 开发 的 GUI 工具 包 ， 它 可 以 应 用 
于 Unix，Linux，MS-Windows95/98/NT/2000 和 MacOS 操 作 系 统 平台 ， 相 对 于 其 它 的 许多 图 
形 接口 开发 工具 包 (如 MFC、GTK、QT 等 ) ， 它 具有 体积 很 小 、 速 度 比较 快 ， 且 有 着 更 好 的 
移植 性 。 本 文 就 FLTK 编 程 的 一 些 基本 方法 进行 介绍 。 


1.1FLTK 功 能 简介 


提供 丰富 的 跨 平台 的 GUI 构件 (Widget)。 有 有 按钮， 菜单， 窗口 等 ， 近 六 十 个 。 

支持 OpenGL， 提 供 FL_GL_Window， 支 持 OpenGL 相 关 的 操作 。 

提供 界面 设计 工具 FLUID， 非 常 方便 进行 界面 的 设计 。 

良好 的 跨 平台 移植 性 。 

支持 多 种 C++ 编译 器 ，Gcc，BC，VC 等 等 。 

灵活 性 。FLTK 本 身 可 以 定制 ， 以 满足 不 同 的 需要 。 这 使 得 FLTK 在 伐 入 式 开 发 上 有 着 极 大 
的 竞争 力 ， 这 正 是 我 要 推荐 使 用 FLTK 的 原因 。 


об т & Оо Гю 一 


本 文 就 FLTK 编 程 的 一 些 基本 方法 进行 介绍 . 


1.2 搭 建 FLTK 开 发 环境 


затка Æ, 我 们 只 需要 下 载 它 的 源 文 件 ， 解 压缩 到 目录 下 ， 在 Linux 下 我 们 只 需要 输入 
make， 编 译 完 成 然后 make install 就 头 文件 安装 到 /uswinclude/FL 目 录 下 。 库 文件 就 在 /uswlib 
下 ， P E O 录 ， 或 者 不 需要 复制 ， 只 在 编译 连接 的 时 

候 指 定 路 径 。 在 window 下 可 以 使 用 VC，BC 打 开 相 应 目录 下 的 工程 文件 编译 即 可 。 


1.21 windows 下 搭建 FLTK 开 发 环境 


第 一 步 :下 载 FLTK 源 码 包 

FLTK 官 网 :http://www .fltk.org/ 

下 载 后 解压 缩 到 C 盘 根 目 录 下 ,命名 为 FLTK 

进 到 c:\FLTKNide\visualc 目录 下 ,找到 fltk.dsw 

用 Visual C++6.0 打 开 项 目 ， 然 后 选择 【组 建 】--> 全 部 重建 ， 就 开始 编译 了 
编译 完成 后 关闭 Visual C++6.0 

第 二 步 :添加 FTLK 库 文件 


1. 重新 打开 Visual С++6.0, 新 建 一 个 Win32 Application 项 目 ,命名 为 FLTK， 然 后 再 新 建 一 
hello.cxx 文 件 


2. 建立 好 之 后 选择 【工程 】-> 【设置 】--> 选 择 “ 连 接 " 选 项 卡 -->" 分 类 ”下拉 框 选择 输入 ， 在 对 
象 / 库 模 块 添加 : 


о fltkd.lib 
о fltkgld.lib 
о comctl32.lib 
о wsock32.lib 
о opengl32.lib 
о glu32.lib 
还 要 在 忽略 库 中 添加 : LIBCD libcd.lib 


3， 之 后 选择 “C/C++" 选 项 卡 ," 分 类 "下拉 框 选择 : code generation, 在 “Use run-time library" 中 
选择 ”Multi-threaded DLL“ 最 后 确定 。 


4. 选择 【工具 】--> 【选项 】--》" 目 录 " 选 项 卡 在 ?目录 “下 拉 框 中 选择 "Include Files" 然后 新 
增 一 项 C:\FLTK( 导 入 头 文件 ) 


5. 在 “目录 “下 拉 框 中 选择 "Library Files” 然 后 新 增 一 项 C:\FLTK (导入 类 库 ) 


6. 编译 运行 hello.cxx 


1.22 ubuntu 下 搭建 FLTK 开 发 环境 
第 一 步 : 配置 基础 开发 环境 GCC 


xhy@xhy-desktop:~$sudo apt-get install build-essential 


第 二 步 : 安装 QT 开发 环境 


NI 


xhy@xhy-desktop:~$sudo apt-get install qt4-dev-tools qt4-doc qt4-qtconfig qt4-demos qt4-d 
HE 


第 三 步 : 下 载 FLTK 源 码 包 





FLTK 官 网 :http://www.fltk.org/ 


下 载 后 解压 缩 : 


xhy@xhy-desktop:~$sudo tar zxvf FLTK.tar.gz 


第 四 步 : 编译 安装 FLTK 


xhy@xhy-desktop:~$cd FLTK 
xhy@xhy-desktop:~$make 
xhy@xhy-desktop:~$sudo make install 


第 五 步 : 测试 环境 


写 一 个 简单 的 FLTK 程 序 


#include <FL/F1.H> 

#include <FL/Fl_Window. H> 

#include <FL/F1_ Box.H> 

int main(int argc, char **argv) 

{ 
Fl_Window *window = пем Fl_Wwindow(300, 180); 
Fl_Box *box = пем Е1_Вох(20,40,260,100,"Не11о‚ World!"); 
box->box(FL_UP_BOX); 
box->labelsize(36); 
box->labelfont(FL_BOLD+FL_ITALIC); 
box->labeltype(FL_SHADOW_LABEL ); 
window->end(); 
window->show(argc, argv); 
return Fl::run(); 


包含 了 需要 的 头 文件 后 ， 该 程序 创建 了 一 个 窗口 


Fl_Window *міпаӢом = пем Fl_Wwindow(300, 180); 


还 创建 了 一 个 box 类 ， 标 签 是 “Hello World!” 


Fl_Box *box = new Е1_Вох(20,40,260,100,"Не11о‚ World!"); 


下 一 步 ， 我 们 设置 了 box 的 类 型 ， 大 小 ， 字 体 和 标签 的 类 型 


box->box(FL_UP_ ВОХ); 
box->labelsize(36); 
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1.3FLTK 构 件 简介 


FLTK 作 为 GUI 开发 包 ， 包 含 了 常用 的 图 形 用 户 接口 需要 的 一 些 构件 ， 视 觉 表现 非常 丰富 ， 如 
下 两 图 所 示 : 
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常用 按钮 构件 


1.3FLTK 构 件 简 介 


按钮 名 称 头 文件 按钮 名 称 头 文件 
Fl_Button Fl_Button.H Fl_Check_Button Fl_Check_Button.H 
Fl_Light_Button Fl_Light_Button.H Fl_Repeat_Button Fl_Repeat_Button.H 
Fl_Return_Button Fl_Return_Button.H Fl_Round_Button Fl_Round_Button.H 


对 于 具有 Fl _Check_Button、Fl_Loght_Button 和 Fl_Round_Button 当 状态 为 off 时 value() =0 , 
On 时 value() 返 回 1。 


处 理 按钮 时 间 可 以 使 用 回调 (callback) 辑 数 ,参见 后 面 的 事件 处 理 。 


文本 处 理 构件 
构件 名 称 头 文件 构件 名 称 头 文件 
Fl_Input Fl_Input.H Fl_Output Fl_Output.H 


Fl_Multiline_Input Fl_Multiline_Input.H Fl_Multiline_output Fl_Multiline_output.H 


设置 和 取得 文本 内 容 使 用 value(); 
如 : 


(пем Fl Іприї (х,у, міаёһћ, height, "Гаре1")) ->ма1ие("Не110о Мог1а!"); 


其 他 构件 参见 FLTK.org 的 文档 说 明 。 
写 一 个 简单 的 FLTK 程 序 


#include <FL/F1.H> 
#include <FL/Fl_Wwindow. H> 
#include <FL/F]1_ Box.H> 


int main(int argc, char **argv) 

{ 
Fl_Window *window = пем РІ Window(300,180); 
Fl_Box *box = new Е1_Вох(20,40,260,100,"Не11о‚ World!"); 
box->box(FL_UP_BOX); 
box->labelsize(36); 
box->labelfont(FL_BOLD+FL_ITALIC); 
box->labeltype(FL_SHADOW_LABEL ); 
window->end(); 
window->show(argc, argv); 
return Fl::run(); 


包含 了 需要 的 头 文件 后 ， 该 程序 创建 了 一 个 窗口 


Fl_Window *window = пем Fl Міпдом(300, 180); 


还 创建 了 一 个 box 类 ， 标 签 是 “Hello World!” 


Е1_Вох *box = пем Е1_Вох(20,40,260,100,"Не11о‚ World!"); 


下 一 步 ， 我 们 设置 了 box 的 类 型 ， 大 小 ， 字 体 和 标签 的 类 型 


box->box(FL_UP_BOX); 
box->labelsize(36); 
box->labelfont(FL_BOLD+FL_ITALIC); 
box->labeltype(FL_SHADOW_LABEL ); 


最 后 ， 我 们 显示 该 窗口 并 进入 FLTK 事件 循环 


window->end(); 
window->show(argc, argv); 
return Fl::run(); 


运行 该 程序 得 到 的 界面 如 下 ， 你 能 直接 关闭 该 窗口 退出 ， 也 可 以 按 ESC 键 退出 
二 


Hello Мока! 





1.4FLTK 事 件 处 理 


对 于 一 般 构 件 的 如 按钮 菜单 等 常用 事件 的 处 理 一 般 可 以 使 用 回调 男 数 实现 ， 回 调 琅 数 的 原 


型 是 : 


void XXX_callback( Fl Widget *w,void *data ) 


// 添 加 自己 处 理 的 内 容 


使 用 F1_Widget->callback( XXX_callback, data) 注册 回调 画 数 


Ор Е ыды Лы ый саа 


按钮 事件 例子 
ааа 
#include <FL/F1.H> 

#include <FL/Fl_Wwindow. H> 

#include <FL/Fl_Button.H> 

#include <FL/Fl_ask.H> 


void Btn01_cb(Fl_Widget *w, void *data) 


{ 
((Fl_Button *)w)->label((char *)data); 
fl_alert("Hello"); 
} 
int main(int argc, сһаг **argv) 
{ 
char *buff ="Не110"; 
Fl МіпаӢом* w = пем Fl Window(272, 144); 
Fl_Button* Btn01 = пем Fl_Button(85, 50, 105, 25, "&Test callback"); 
Btn01->shortcut(FL_ALT+'t'); // 定 义 按钮 的 快捷 键 
Віпо1->са11раск( (Е1 Са11раск* )Віпо1 сб, buff); // 调 用 义理 画 数 buff 作 为 参数 
м->епа(); 
w->show(argc, argv); 
return Fl::run(); 
} 


азі тлер, тл Бан, ти ЕТ, ЖН НЕЧЕ, 


通常 的 callback 是 当 构 件 的 value 改 变 时 调用 ， 可 以 使 用 when() 改 变 为 其 他 事件 发 生 调 用 回调 
函数 ， 主 要 事件 有 以 下 事件 


事件 说 明 
Е WHEN_NERVER 从 不 调用 回调 画 数 
FL WHEN_CHANGED 当 构 件 值 改变 时 调用 
FL_WHEN_RELEASE 当 释 放 按 键 或 者 鼠标 并 且 构 件 值 改变 
FL_WHEN_RELEASE_ALWAYS 当 释 放 按 键 或 者 鼠标 ， 即 使 构件 值 没有 改变 
FL_WHEN_ENTER_KEY 按 下 Enter 键 并 且 构 件 值 改变 


FL WHEN_ENTER KEY ALWAYS 按 下 Enter 键 ， 即 使 构件 值 没 有 改变 


通过 使 用 F1 Widget->when(FL_WHEN_XXXX) 来 改变 回调 事件 。 


#include <FL/F1.H> 
#include <Е/Е1_\М1їпаош.Н> 
#include <FL/Fl_Button.H> 
#include <FL/Fl_ask.H> 


void Btn01_cb(Fl_WwWidget *w, void *data) 


fl_alert("Hello"); 
} 


int main(int argc, сһаг **argv) 

{ 
char *buff = "Hello"; 
Fl МіпаӢом* w = пем Fl_Window(272, 144); 
Fl_Button* Btn01 = пем Fl_Button(85, 50, 105, 25, "&Test callback"); 
Btn01->shortcut(FL_ALT + 't'); 
Btn01->callback((Fl_Callback*) Btn01_cb, buff); 
Btno1->when(FL_WHEN_RELEASE_ALWAYS ) ; 
м->епа(); 
w->show(argc, argv); 
return Fl::run(); 


编译 运行 程序 ， 在 按钮 上 按 下 鼠标 左 键 ， 移 动 到 按钮 外 ， 松 开 鼠 标 按键 ， 仍 然 会 弹出 对 话 
框 ， 对 比 上 面 的 两 程序 ， 看 看 有 什么 不 同 。 


1.5FLTK 消 息 义理 


Са оса га р 


ya he a nd kd A EE OKEERE EEE EESTEC EEREE EEEE EREE 


Fl_Button 中 处 理 消息 的 代码 ， 省 略 了 具体 的 处 理 代码 
ааа 
int Fl_ Button::handle(int event) { 
switch (event) 
{ 
case FL_ENTER: 
case FL_LEAVE: return 1; 
case FL PUSH č  ě — ue 
case FLDRAG .... 
case FL RELEASE .... 
case FL_SHORTCUT: 
саѕе ЕГ Е0СуО5 T T 
case FL_UNFOCUS : an 
case FL_KEYBOARD : .... 
деҒаи1 : геёигп 0; 


可 以 看 出 了 ， 系 统 的 一 些 消息 ， 都 是 在 构件 的 handle() 中 进行 处 理 的 。 系统 的 主要 消息 有 以 
下 


鼠标 事件 消息 焦点 事件 消息 
FL_PUSH FL_ENTER 
FL_DRAG FL_LEAVE 
FL_RELEASE FL_FOCUS 
FL_MOVE FL_UNFOCUS 
键盘 事件 消息 ЕЛУ НА 
FL_KEYBOARD FL_PASTE 
FL_SHORTCUT FL_SELECTIONCLEAR 
构件 事件 消息 
FL_DEACTIVATE FL_ACTIVE 
FL_HIDE FL_SHOW 


通过 重 载 handle 本 数 我 们 可 扩充 标准 构件 ， 下 面 是 一 个 鼠标 移动 到 上 面 就 改变 颜色 的 按钮 的 
实现 源 代 码 。 


#include <FL/F1. H> 
#include <FL/Fl_Wwindow. Н> 
#include <FL/Fl_Button.H> 
#include <FL/fl_ask.H> 


class EnterButton : public Fl_Button 


int handle(int e) 
{ 


switch (e) 


case FL_ENTER: 
color (FL_GREEN); 
labelsize(18); 
redraw(); 
return 1; 

case FL_LEAVE: 
color (FL_GRAY); 
labelsize(18); 
redraw(); 
return 1; 

default: return Fl_Button::handle(e); 


} 


public: 
EnterButton(int x, int y, int w, int h, const char *1 ) : Fl_Button(x,y,w,h,1) {} 
}; 


static void cb(F1 Widget* s, void *даѓа) 


fl_alert( "Hello World!" ) 


} 
int main(int argc, char **argv) 
{ 
Fl Window* w = пем Fl Міпдом(130, 50); 
ЕпёегВиёёоп *eBtn = пем ЕпёегВиёЁоп(25, 50, 120, 25, "Не110омог1а"); 
еВвіп->са11раск( (ғ1_Са11раск* )cb); 
м->епа(); 
м->ѕһом(агос, argv); 
return РІ: : ғип(); 
} 








1.6OpenGL 编 程 


在 FLTK 中 很 容易 使 用 OpenGL 进 行 图 形 编程 的 ， 我 们 只 需要 使 用 它 的 F|_GI_ Window 构 件 ， 重 
新 定义 一 个 派生 于 Fl_GI_Window 的 类 ， 重 坊 draw() 和 handle() 就 可 以 。 所 需要 的 代码 和 步骤 
如 下 : 


1. 包含 以 下 头 文件 


#include <FL/F1.H> 
#include <FL/g1l.h> 
#include <FL/F]1 61 Window.H> 


2， 定 义 一 个 子 类 ， 如 下 代码 所 示 


class MYGLWindow : public РІ 61 Window 


{ 

void дгам(); // 作 图 操作 

void handle( int ); // 消 息 事 件 处 理 

public : 

MYGLWindow(int x,int y,int w,int h,const char *L) : Fl_Gl_Window(x,y,w,h,L){}; 
}; 


3. 实现 draw() 事 件 


void MYGLWindow: :draw() // 作 图 
if(!valid()) 
{ 
// 设 置 viewport 窗 口 大 小 等 等 例如 


th eo ИСЕ 


valid(1); 
glLoadIdentity(); 
glViewport(0,0,w(),h()); 


KERERE КУЖ ЗУ УКЕ ЕЕ КУК АКЕ oe EREI EE NRE EEI 


} 
// 添 加 使 用 OPENGL 作 图 操作 


4. 事件 处 理 实现 


void MYGLWindow: :handle( int event) // 事 件 处 理 


{ 
switch (event) 
{ 
сазе FL_PUSH : // 操 作 等 
return 1; 
Case ...... 
} 
} 


1， 编 译 时 需要 包含 openGL32 的 库 文 件 ， 名 字 在 不 同 的 平台 名 字 稍 微 不 同 。 
2， 使 用 <FL/g1.h> 代 蔡 <6L/gl.h> 头 文件 ， 不 要 使 用 后 者 的 头 文件 。 


例子 程序 比较 长 ， 附 在 参考 中 。 运 行 显示， 弹出 菜单 后 如 图 所 示 : 


О 2 四 边 形 Апы 
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第 二 章 : 常用 的 控件 和 属性 


x 


章 将 描述 FLTK 提 供 的 控件 ， 并 介绍 如 何 得 到 和 设置 控件 的 标准 属性 。 


2.11% 


FLTK 提 供 了 很 多 类 型 的 按钮 


Fl_Button 
Fl_Check_Button 
Fl_Light_Button 
Fl_Repeat_Button 
Fl_Return_Button 
Fl_Round_Button 


普通 按钮 
带 有 选择 框 的 按钮 
带 有 指示 灯 的 按钮 


能 被 Enter 激 活 的 按钮 
带 有 辆 形 选择 框 的 按钮 


每 一 个 按钮 都 需要 相应 的 <FL/F1_xyz_Button.H> 头 文件 。 


构造 酌 数 包含 了 控件 的 位 置 ， 大 小 和 可 选 的 标签 


Fl_Button *button = пем Fl_Button(x, у, width, height, "label"); 


Fl_Light_Button *lbutton 
Е1 Воипа Виёёоп *гриёёоп 


пем ЕІ Light_Button(x, у, width, height); 
пем Е1 Коипа Виёёоп(х, у, width, height, "1аре1"); 


每 一 个 按钮 可 以 设置 自己 的 类 型 用 type(), 通 过 这 个 设置 ， 可 以 让 一 个 按钮 为 push button, 


toggle button, or radio button: 


button->type(FL_NORMAL_BUTTON ) ; 
lbutton->type(FL_TOGGLE_BUTTON); 
rbutton->type(FL_RADIO_BUTTON); 


对 于 toggle 和 radio 按 钮 ，value() 范 数 返 回 当 前 的 状态 ， 开 / 关 (0 代表 关 ，1 代 表 开 ) ，set() 和 
clear() 分 别 用 来 设置 和 清除 togglebutton 的 状态 。Radio Button 可 以 用 setonly() 打 开 ， 同 组 中 
的 其 他 Radio button 按 钮 将 关闭 。 


2.2 文 本 


FLTK 提 供 了 几 种 文本 控件 来 显示 和 接收 文本 信息 


FlL_Input 输入 单行 的 文本 
Fl_Output 输出 单行 的 文本 
FI_Multiline_Input 多 行文 本 输入 框 
FL_Multiline_Output 多 行文 本 输出 框 
Fl_Text_Display 显示 多 行文 本 控件 
ЕІ _Text_Editor 多 行文 本 编辑 控件 
Fl_Help_View 显示 HTML 文 本 控件 


FL_Output and FL_Multiline_Output 控件 允许 互相 copy， 但 是 不 能 改变 


Value() 函 数 用 来 设置 和 得 到 显示 的 字符 串 


Fl_Input *input = пем Е1_Тприї(х, у, width, height, "label"); 
input->value("Now is the time for all good men..."); 


这 个 字符 串 将 被 拷贝 到 该 控件 的 存储 空间 内 ， 当 用 value() 设 置 后 


Fl_Text_Display апа Fl_Text_Editor 用 Fl_Text_Buffer 来 设置 他 的 值 ， 而 不 是 一 个 简单 的 字符 
ЕВ, 


Valuators 
Valuators 用 来 显示 数字 轨迹 信息 
Fl_Counter 带 有 箭头 按钮 的 控件 显示 当前 值 
Fl_Dial 圆 形 手柄 
РІ Коіег 
ЕІ _Scrollbar 滚动 条 控件 
Fl_Slider 带 有 手柄 的 滑 块 
ЕІ Value_Slider 显示 当前 值 的 滑 块 


value() 画 数 得 到 和 设置 控件 的 当前 值 ，minimum() 和 maximum() 设 置 了 控件 的 范围 


群 Groups 


Fl_Group 控 件 被 用 来 做 一 般 的 容器 控件 。 除 了 单 选 按钮 群 以 外 ， 还 被 用 来 形成 
windows,tabs,scrolled windows 等 控件 。 一 下 是 FLTK 提 供 的 群 类 。 


Fl_Double Window 一 个 双 缓 冲 的 窗口 

ЕІ СІ Window 一 个 OpenGL 的 窗口 类 

Е1_Сгоир 容器 类 的 基 类 。 能 被 用 来 包含 所 有 的 控件 
ЕІ Раск 将 控件 收集 到 一 个 群 区 域 中 

Fl _Scroll 滚动 窗口 区 域 

Fl_Tabs 

Fl_Tile 

Fl_Window 


设置 控件 的 位 置 和 大 小 
控件 的 位 置 和 大 小 在 你 创建 的 时 候 就 已 经 设置 了 ， 你 可 以 通过 x(),y(),w(),h(), 来 得 到 。 
改变 大 小 和 位 置 用 position(),resize(),size() 画 数 。 


button->position(x, y); 
group->resize(x, y, width, height); 
window->size(width, height); 


2.3 颜 色 


FLTK 用 一 个 32 位 的 无 符号 整形 存储 颜色 。 它 可 能 是 256 种 颜色 一 个 索引 ， 也 可 能 是 一 个 24 位 
的 RGB 颜色 。 调 色 板 不 是 X 或 WIN32 的 colormap, 它 是 有 对 应 固定 内 容 的 调 色 板 


以 下 是 一 些 常用 的 颜色 的 符号 定义 : 


。 FL_BLACK 

。 FL_RED 
。FL_GREEN 

• FL YELLOW 
。FL_BLUE 
FL_MAGENTA 
FL_CYAN 

。FL WHITE 


这 些 符号 是 FLTK 控 件 默 认 的 颜色 ， 详 细 情 况 请 参考 Enumerations 


FL_FOREGROUND_COLOR 
FL_BACKGROUND_COLOR 
FL_INACTIVE_COLOR 
FL_SELECTION_COLOR 


RGB 颜色 可 以 用 fl_rgb_color() 郴 数 设 置 。 


Е1_Со1ог c = fl_rgb_color (80,170,255); 


控件 的 颜色 用 color() 函 数 设置 


button->color (FL_RED); 


类 似 的 ， 标 签 的 颜色 用 labelcolor() 函 数 设置 


button->labelcolor (FL_WHITE); 


2.4Box 类 型 


Fl_Boxtype 的 类 型 在 <Enumeration.H> 中 定义 ， 可 以 用 FI_Widget::box() 设 置 和 得 到 。 


FL_NO_BOX 意 思 是 任何 东西 都 不 要 画 ， 但 仍然 是 留 在 窗口 上 。FI_FRAME 类 型 只 是 画 边 框 ， 


中 间 不 做 任何 改变 。 如 图 中 蓝 色 的 部 分 。 


制作 你 自己 的 Boxtypes 


你 可 以 自己 制作 个 性 风格 的 boxtype. 通 过 一 个 小 函数 ， 并 将 其 加 到 boxtypes 的 列表 中 画 


豆 数 传递 的 参数 控件 的 是 pox 的 边界 和 背景 颜色 


void xyz_draw(int x, int у, int м, int h, Е1_Со1ог с) 


{ 
} 


如 一 个 简单 的 画图 函数 填充 一 个 矩形 ， 给 定 颜色 并 画 一 个 黑色 的 外 框 


void xyz_draw(int х, int у, int w, int h, Е1_Со1ог с) 


{ 
fl_color(c); 
fl_rectf(x, у, w, h); 
fl_color(FL_BLACK); 
fl_rect(x, y, w, h); 
} 


加 入 自 定义 的 box 类 型 
Fl::set_boxtype 男 数 添加 或 取代 特定 的 box 类 型 


#define ХҮ2 ВОХ FL_FREE_ BOXTYPEF]::set_boxtype(XYZ_BOX, xyz_draw, 1, 1, 2, 2); 


后 4 个 参数 是 偏 移 量 ， 当 画 该 box 时 ，x,y,w,h 会 减 去 相应 的 偏 移 量 


Ери 


第 三 章 : FLTK 的 画图 函数 


这 章 泗 盖 了 FLTK 提 供 的 所 有 画图 副 数 


3.1 何 时 可 以 画图 


什么 时 候 可 以 画图 ， 只 有 在 几 个 地 方 可 以 执行 画图 代码 。 在 其 他 地 方 调用 该 函数 会 出 现 未 定 

义 该 行为 的 错误 : 

1. 最 常 出 现 的 地 方 是 在 虚拟 函数 FI_ Widget::draw() 中 。 你 的 类 需要 继承 一 个 Fl_Widget 类 ， 
然后 在 自己 的 类 中 写 draw() 图 数 。 

2. 1 %рохіуре#ареќурев + #1. 

з. 你 可 以 调用 FL_ Window::make_current() 来 增加 控件 的 更 新 。 用 FL_Widget::window() 找 到 
要 更 新 的 窗口 


3.2 FLTK 的 画图 函数 


调用 这 些 画 图 函数 之 前 ， 要 包含 头 文件 <FL/fl_draw.H> 
FLTK 提 供 以 下 画图 函数 : 


e Boxes 

e Clipping 

e Colors 

• Line dashes and thickness 
e Fase Shapes 

e Complex Shapes 

e Text 

• Images 

e Overlay 


Boxes 


FLTK 提 供 了 三 个 函数 来 画 box， 主 要 用 于 画 按 钮 和 其 他 的 UI 控件 。 每 一 个 函数 都 提供 了 box 的 
EA, X, 高 等 参数 。 


void #1 агам рох(ғ1 Вохёуре b, int х, int у, int w, int h, Е1_Со1ог c); 


2 Ва T —– 1 Ж ВЈрох, box Ж {7 56, хес 


void #1 Ғгате(сопѕї char *5, int х, int у, int м, int h); 


该 图 数 画 了 一 个 边框 ，s 是 4 个 字母 ，A 代 表 黑 色 ，X 代 表白 色 ， 顺 序 是 上 ， 左 ， 下 ， 右 。 


void fl frame2(const char *s, int х, int y, int м, int h); 


Е frame 不 同时 s 代 表 的 颜色 的 顺序 ， 分 别 是 下 ， 右 ， 上 ， 左 。 


3.3550 


你 可 以 限制 你 的 画图 行为 在 一 个 矩形 之 内 ， 应 用 fpush_clip(xywh), 释 放 用 fL_pop_clip. 
该 矩形 用 象 素 未 单位 ， 不 会 受 变 换 和 矩阵 的 影响 
另外 ， 系 统 会 提供 更 新 窗口 的 剪 切 域 ， 但 是 比 一 个 简单 的 矩形 要 复 末 的 多 


void fl_clip(int х, int y, int м, int h) 
void fl_push_clip(int x, int y, int w, int h) 


一 个 矩形 剪 切 一 个 区 域 ， 并 把 这 个 区 域 压 人 堆栈 。Fl_clip() 不 提倡 ， 并 将 在 以 后 的 版 本 中 去 
IRIA ВЧ 


void #1 риѕћ по _с1ір() 


压 人 一 个 空 的 剪 切 域 到 堆栈 


void fl_pop_clip() 


恢复 剪 切 域 ， 画 图 范围 不 再 受 矩 形 限制 ，fL_push_clip() 一 定 要 调用 该 酚 数 。 


int fl_clip_box(int х, int у, int w, int h, int &Х, int &Ү, int &W, int &Н) 


新 的 剪 切 域 与 昌 的 剪 切 域 相交 ， 相 交 的 矩形 位 置 保 存在 X,YW,H, 如 果 完 全 没有 相交 ， 则 W,H 为 
0; 


3.4 颜 色 


FLTK 将 颜色 义理 为 32 位 的 整形 。0-255 分 别 代表 不 同 的 颜色 。Fl_color 枚 举 类 型 定义 了 前 256 
个 基本 的 颜色 。 


颜色 值 大 于 255 的 被 认为 是 24 位 的 RGB 值 。 显 示 的 是 最 接近 该 值 的 颜色 。 


void fl_color(Fl_Color) 设置 当前 使 用 的 颜色 
Е1 Со1ог fl color() 返回 最 后 设 定 的 颜色 
void fl_color(uchar r, uchar g, uchar b) 设置 rgb 颜色 。 


3.5 设 置 线条 的 属性 
FLTK 支 持 设 定 线条 的 宽度 和 类 型 。 


void fl_line_style(int style, int width=0, сһаг* dashes=0) 


style 是 以 下 几 种 类 型 之 一 ， 黑 认 的 是 FL_SOLID。 


FL SOLID a= 
FL_DASH р 
PEDOT 
FL_DASHDOT ез 
FL_DASHDOTDOT mT 
FL_CAP_FLAT 

FL_CAP_ROUND 


FL_CAP_SQUARE (extends past end point 1/2 line width) 
FL_JOIN_MITER (pointed) 

FL_JOIN_ROUND 

FL_JOIN_BEVEL (flat) 


宽度 是 以 象 素 值 为 单位 ， 默 认 的 0 
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ТВОЕ КЛ, НГ БАНН РТ ВАЕ, хин ЗЕТЕ ЖАНЕ, ЗЕЯ, eiT AEE 


何 支 持 FLTK 的 平台 上 使 用 。 
void fl_point(int x, int у) // нд 
void fl_rectf(int x,int y,int w,int h) // 画 一 个 矩形 并 填充 内 部 
void fl_rectf(int x,int у, іпё w,int h,uchar r, uchar g, uchar b) // 自 定义 颜色 填充 矩形 
void fl 1іпе(іпі х, int у, int х1,іпі y1) // 画 一 条 直线 ， 起 点 为 Xx, y, 终点 为 X1, y1 


void 
void 
void 


fl_line(int x int y,int x1,int у1,іпі x2,int y2) // 画 两 条 直线 
fl_loop(int х, int y, int х1, int y1, int х2, int y2) 
fl_loop(int x, int y, int x1, int y1, int x2, int y2, int x3, int y3) 


Outline a 3 or 4-sided polygon with lines. 


3.7 男 封闭 的 线 ， 一 次 连接 个 顶 所 


void #1 ро1удоп(іпі х, int у, int х1, int y1, int x2, int y2) 
void fl_polygon(int x, int y, int x1, int y1, int x2, int y2, int x3, int y3) 


Fill a 3 or 4-sided polygon. The polygon must be convex. 
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void fl xyline(int х, int y, int х1) 
void fl ху1іпе(іпі х, int y, int х1, int y2) 
void fl_xyline(int x, int y, int x1, int y2, int x3) 


先 画 一 条 水 平 的 线 ， 再 画 一 条 垂直 的 线条 ， 最 后 画 一 条 水 平 线 
void fl_yxline(int х, int y, int y1) 


void fl_yxline(int x, int y, int y1, int x2) 
void fl_yxline(int x, int y, int y1, int x2, int y3) 


首先 男 垂直 线条 ， 接 着 是 水 平 线 ， 最 后 是 垂直 线 


void fl_arc(int х, int у, int w, int h, double a1, double a2) 
void fl_pie(int x, int y, int w, int h, double a1, double a2) 


画 弧 形 线 ， 两 个 角度 是 以 三 点 处 为 0 度 ， 逆 时 针 旋 转 ，a2 必 须 大 于 或 等 于 al1 
fl_pie() 填充 弧 形 内 部 


3.98 ж A EZ 


复 末 的 画图 画 数 利用 2-D 线 性 转换 能 让 你 画 出 任意 图 形 。 这 个 功能 与 Adobe? PostScript 语言 
实现 的 功能 很 相似 ， 在 X 和 Win32 上 ， 在 画 线段 之 前 所 有 的 转换 顶点 都 是 用 整数 表示 ， 这 就 限 
制 了 画图 的 精确 性 。 如 果 要 画 比 较 精 确 的 图 形 ， 最 好 用 OpenGL 来 画 。 


void fl_push_matrix() 
void fl_pop_matrix() 


保存 和 恢复 当前 的 转换 ， 堆 栈 的 最 大 深度 为 4 


void fl_scale(float х, float у) 

void fl_scale(float x) 

void fl_translate(float x, float y) 

void fl_rotate(float d) 

void fl_mult_matrix(float a, float b, float c, float d, float x, float y) 


在 当前 的 转换 基础 上 连接 另外 一 个 转换 。 旋 转角 度 是 度数 不 是 弧度 ， 逆 时 针 旋转 。 


void #1 Ббедіп 1іпе() 
void #1 епа 1іпе() 


开始 和 结束 画 线 


void fl_begin_loop() 
void fl_end_loop() 


开始 和 结束 画 一 系列 封闭 的 线 


void #1 бедіп ро1удоп() 
void #1 епа ро1удоп() 


开始 和 结束 画 多 边 形 并 填充 


void #1 бедіп сотр1ех_ ро1удоп() 
void fl_gap() 
void fl_end_complex_polygon() 


开始 和 结束 画 一 个 复杂 的 多 边 形 并 填充 。 这 个 多 边 形 可 以 是 凹凸 不 同 的， 不 连贯 的 ， 甚 至 中 
间 有 空心 的 。 调 用 fl_gap() 分 开路 径 。 不 必 也 是 有 害 的 如 果 在 第 一 个 顶点 之 前 或 最 后 一 个 顶点 
之 后 调用 fl_gap() 范 数 ， 在 一 行 中 多 次 调用 也 是 不 行 的 。 


Fl_gap() 只 能 用 在 fi begin_complex_polygon() 和 f|_ end_complex_polygon() 之 间 。 男 多 边 形 
的 轮廓 ， 使 用 fl_begin_loop 并 用 fl_ end_loop 和 fl_begin_loop 代 蔡 fl_ gap(); 


void fl vertex(float х, float y) 


在 当前 路 径 中 增加 一 个 顶点 


void fl_curve(float х, float у, float х1, float y1, float х2, float y2, float x3, float у 


| ЕЕ 











在 路 径 中 增加 一 系列 的 点 画 Bezier 曲线 。 该 曲线 的 末端 是 x,y 和 X3,y3。 
void fl_arc(float x, float у, float г, float start, float епа) 
增加 一 系列 的 点 在 当前 圆 环 的 弧 线 上 。 在 调用 fl arc() 之 前 应 用 scale 和 rotate 可 以 得 到 椭圆 的 


路 径 。X,y 是 圆 的 中 心 ，r 是 半径 。FI_arc() 从 start 角 度 画 弧 直 到 end, 按 逆 时 针 旋 转 。 如 果 end 大 
于 start 则 它 是 按照 顺 时 针 转 


void fl circle(float х, float у, float r) 
fl_circle 等 于 fl_arc(...,0,360)， 但 是 更 快 ， 如 果 你 在 画 多 边 形 的 时 候 用 到 圆 , 则 必须 用 fl_arc(). 
文本 的 画 法 
所 有 的 文本 都 字体 都 是 适用 当前 字体 。 现 在 还 不 明确 在 转换 情况 下 ， 位 置 或 字符 是 否 会 改变 


void fl агам(сопѕї char *, int х, int у) 
void fl draw(const char *, int п, int х, int у) 


void fl draw(const char *, int х, int у, int м, int h, Fl_Align align, Fl Image *img = 0, 
void fl_measure(const char *, int &w, int &h, int draw_symbols = 1) 
int fl_height() 





int fl_descent() 

float fl_width(const char*) 

float fl_width(const char*,int п) 
float fl_width(uchar) 

const char *fl_shortcut_label(ulong) 


返回 按钮 或 菜单 的 快捷 键 字符 串 


3.10 字 体 


FLTK 支 持 很 多 标准 的 字体 ， 比 如 Times, Helvetica/Arial, Courier, апа Symbol typefaces, 
户 也 可 以 自 定义 字体 ， 每 一 个 字体 都 有 自己 的 索引 列表 


初始 化 只 安装 了 16 种 字体 ， 他 们 的 名 字 是 FL_HELVETICA, FL_TIMES, FL_COURIER, 另 外 有 
二 个 修饰 体 FL_BOLD,FL_ITATIC。 加 上 FL_SYMBOL,FL ZAPF_DINGBATS 


不 能 超过 255 种 字体 ， 因 为 FL Widget 是 以 一 个 字 节 来 存储 的 。 


void fl_font(int face , int size) 设 置 字体 和 大 小 
int fl_font() 
int fl_size() 


得 到 字体 和 大 小 


3.112268 р р 


void fl омег1ау гесї(іпї х, int у, int м, int h); 
void #1 омег1ау с1еаг(); 


前 者 与 先前 颜色 异 或 操作 ， 后 者 清楚 异 或 操作 


使 用 该 画 数 非常 的 巧妙 ， 你 应 该 在 控件 中 有 handle() 和 draw() 函 数 ，draw() 应 该 调用 
f|_overlay_clear() 在 做 任何 事情 之 前 。Handle() 范 数 应 该 调用 window()->make_current() 然 后 
在 FL_DRAG 事 件 中 调用 fl_ overlay_rect()， 在 FL_RELEASE 事 件 中 调用 fl _overlay_clear(). 


第 四 章 : 在 FLTK 中 自 定 义 控件 


4.1 定 制图 形 控件 说 明 


新 控件 的 创建 是 通过 继承 已 经 存在 的 控件 来 得 到 的 ,一 般 控件 继承 Fl_Widget 得 到 ， 组 合 控件 继 
承 F|_Group 得 到 


一 个 普通 控件 一 般 通 过 接收 和 显示 一 个 值 来 与 用 户 交互 


一 个 组 合 控件 包含 一 组 子 控件 并 处 理子 控件 的 移动 ， 改 变 大 小 ， 显 示 或 隐藏 事件 。FI_Group 
是 所 有 组 合 控件 的 基 类 ， 其 他 组 合 控件 比如 Fl_Pack, Fl_Scroll, Fl_Tabs , ЕІ Тііе, FL_ Window 
都 是 他 的 子 类 


你 也 可 以 通过 继承 其 他 的 已 存在 控件 来 得 到 你 要 的 控件 ， 通 过 提供 不 同 的 外 观 和 接口 。 比 如 
Button 控件 都 是 FL_ Button 类 的 子 类 。 他 们 的 共同 点 是 都 是 通过 鼠标 点 击 事件 与 用 户 交互 。 唯 
一 不 同 的 是 按钮 的 外 观 。 


4.2 如 何 开发 一 个 控件 的 子 类 


你 的 子 类 可 以 直接 继承 FL_Widget 类 ， 也 可 以 继承 任何 FL_Widget 类 的 子 类 。FL_Widget 只 有 四 
个 虚拟 画 数 ， 子 类 必须 重 载 所 有 的 或 部 分 的 这 些 函 数 。 


№ р 
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MyClass(int х, int у, int м, int h, const char *1аре1 = ©); 


这 就 允许 该 类 能 很 好 的 应 用 于 FLUID 中 
这 个 构造 贺 数 必须 调用 基 类 的 构造 琅 数 并 传递 相同 的 参数 


MyClass: :MyClass(int х, int y, int м, int h, const char *label): 
Fl_widget(x, y, w, h, label) {// do initialization stuff...} 


FI_Widgeth 32 4 E 9 0188 3+ 0 26 AI х ,у,му,ћ labeli 5] 7 18х(),у(),м(),Һ)% абе) #78 
化 其 他 的 属性 如 : 


type(0); 

box(FL_NO_BOX); 

color (FL_BACKGROUND_COLOR); 
ѕе1Іесііоп со1ог (FL_BACKGROUND_COLOR); 
labeltype(FL_NORMAL_LABEL ); 
labelstyle(FL_NORMAL_STYLE); 
labelsize(FL_NORMAL_SIZE); 
labelcolor (FL_FOREGROUND_COLOR); 
align(FL_ALIGN_CENTER); 
callback(default_callback, 0); 
flags (ACTIVE|VISIBLE); 
image(0); 

deimage(0); 


ЕІ Маде 42 PX j 2425 


以 下 的 成 员 画 数 是 F|_Widget 提 供给 子 类 的 : 


ЕІ Widget::clear_visible 
Fl_Widget: : damage 

Fl_widget: :draw_box 

1 Widget::draw_ focus 

Fl Widget::draw_ label 

1 Widget::set_flag 
Fl_Widget::set_visible 
Fl_Widget::test_shortcut 
Fl_Widget::type 

void Fl Widget::damage(uchar mask) 
void Fl Widget::damage(uchar mask, int х, int у, int м, int h) 
uchar Fl_Widget: : аатаде() 


第 一 个 函数 是 指 对 象 的 部 分 需要 更 新 。 参 数 mask 中 的 位 设置 传递 给 damage().draw() 函 数 能 根 


据 该 值得 到 哪些 需要 重男 。 公 共 成 员 函 数 FI|_Widget:: л A 


FI Умадеё:даттаде(Еі DAMAGE АП УШЕШ н, 但 是 你 的 控件 真正 执行 


调用 私有 成 员 男 数 damage(n). 

第 二 个 函数 指 某 个 区 域 无 效 ， 重男 。 

第 三 个 函数 返回 所 有 damage(n) 的 调用 所 产生 的 位 。 
画 


当 重 新 画 一 个 控件 时 ， 你 应 该 先 看 看 无 效 位 ， 再 决定 你 的 控件 的 哪 部 分 需要 重新 画 
函数 能 够 设置 单独 的 无 效 位 限制 需要 重 画 的 数量 。 


MyClass: :handle(int event) 


{ 
if (change_to_part1) датаде(1); 
if (сһапде ёо рагё2) датаде(2); 
if (сһапде ёо раг 3) датаде(4); 

} 

MyClass: :draw() 

{ 


if (damage() & FL_DAMAGE_ALL) 
{ 
. draw frame/box and other static stuff ... 


} 

if (damage() & (FL_DAMAGE ALL | 1)) агам рагї1(); 
if (damage() & (FL_DAMAGE ALL | 2)) агам рагі2(); 
if (damage() & (FL_DAMAGE ALL | 4)) агам рагіз(); 


void Fl міддеї: : агам box() const 


的 时 候 会 


{j Handle() 


ж— ЕЕ Ж ЕЕН КЕБЕТЕ {БЕ }рох(). 8NA ibob Hb ,颜色 c 画 box. 


void Fl міддеї: : агам focus() const 
void Fl Міддеї: : агам ҒРосиѕ(Ғ1 Boxtype b, int х, int у, int м, int h) const 


Е — 20 ја) ВОВЕ рох Н А Е, Я Е УРН 5 — рох E ка 


Ғ1 Міадеї::агам 1аре1() const 
void Fl міадеї: :агам 1аре1(іпї х, int у, int м, int h) const 
void Fl міадеѓ: :агам 1аре1(іпї х, int у, int м, int h, РІ А1ідп align) const 


Draw() 范 数 调 用 该 芳 数 来 画 一 个 控件 的 label, 如 果 标 签 出 了 该 控件 的 box 范围 ， 将 不 会 被 画 
出 。 

第 二 种 形式 自 定 义 一 个 box 来 画 标签 ， 比 如 用 于 移动 的 滑 块 

第 三 种 形式 可 以 将 标签 画 在 任意 的 地 方 


void Fl Widget::set_ уіѕір1е() 
void Fl Widget::clear_visible() 


与 F|_Widget::show() Fl_Widget::hide() 作 用 相同 ， 但 不 发 送 FL_SHOW,FL_HIDE 事 件 。 


int Fl Widget::test_shortcut() const 

static int Fl Widget::test shortcut(const char *s) 
uchar ЕІ Widget::type() const 

void Fl Widget::type(uchar t) 


返回 一 个 8 位 的 标示 符 ， 用 于 与 Forms 兼 容 ， 你 也 可 以 同 于 其 他 任何 目的 ， 设 置 的 值 应 该 小 于 
100， 以 免 与 系统 的 保留 值 冲突 


4.3 处 理事 件 


虚拟 函数 int handle(int event) 被 用 来 处 理 任 何 发 送 给 控件 的 事件 .他 能 改变 控件 的 状态 
调用 FI_Widget::redraw() 如 果 该 控件 需要 重新 显示 


调用 FL_Widget'::damage(n) 当 控件 需要 部 分 更 新 时 (假如 你 在 FL_Widget'::draw() 函 数 中 提供 了 
对 该 范 数 的 支持 ) 


调用 Fl Widget::do_callback() 如 果 一 个 回调 函数 产生 时 . 
8 ВЕІ Widget::handle() 对 子 控件 
事件 用 一 个 整数 来 标识 .最 近 事件 产生 的 其 他 消息 静态 存储 在 本 地 ,调用 Fl::event_*() 可 以 得 到 . 


以 下 是 一 个 利用 handle() 处 理事 件 的 例子 ， 该 控件 的 行为 类 似 按钮 同时 接收 x 按键 并 调用 回调 
函数 


int MyClass: :handle(int event) 
switch(event) 


case FL_PUSH: 
highlight = 1; 
redraw(); 
return 1; 

case FL_DRAG: 


int t = Fl::event_inside(this); 
if (t != highlight) 


highlight = t; 
redraw(); 
} 
} 
return 1; 


case FL_RELEASE : 
if(highlight) 
{ 


highlight = 0; 
redraw( ); 
do_callback( ); 
// never do anything after a callback, as the callback 
// may delete the widget! 
} 
return 1; 
case FL_SHORTCUT : 
if(Fl::event_key() == 'х') 


до _са11раск(); 
return 1; 


return 0; 
default: return Fl Widget::handle(event); 


当 你 的 handle() 落 数 处 理 某 事 件 后 不 能 返回 09， 若是 返回 9， 父 控 件 将 会 把 该 事件 发 送 给 其 他 控 
件 。 


4.4 画 控件 


当 FLTK 需 要 重 画 控件 时 将 调用 虚拟 画 数 draw(). 只 有 在 damage() 返 回 非 0 值 时 调用 该 本 数 ， 
draw() 返 回 后 ，damage() 被 清 0。Draw() 应 该 被 声明 为 保护 成 员 函 数 ， 避 免 在 不 需要 写 画 图 代 
码 时 用 到 。 


Damage() 将 包含 从 最 后 一 次 调用 draw() 后 damage(m) 调 用 产生 的 所 有 和 与 或 位 信息 ， 根 据 该 信 
息 只 重 画 需要 重 画 的 位 置 ， 只 有 FLTK 认 为 需要 全 部 重 画 时 才 打 开 FL_DAMAGE_ALL 位 ， 上 比如 
收 到 expose 事 件 。 


修改 控件 的 尺寸 


resize(int x,int yint w,int h) 在 控件 被 移动 和 改变 大 小 时 被 调用 ， 这 些 参 数 分 别 是 新 位 置 ， 宽度 
和 高 度 。 但 是 x(),y(),w(),h(), 还 是 以 前 的 值 ， 若 要 改变 这 些 值 ， 必 须 在 基 类 中 也 调用 resize() 函 
数 

不 需要 调用 redraw() 函 数 ， 至 少 只 改变 x(),y() 时 不 需要 ， 因 为 一 个 组 合 控件 有 一 套 更 有 效 的 方 
法 来 画 新 的 位 置 


如 何 制作 一 个 组 合 控件 


一 个 组 合 控件 包括 一 个 或 多 个 子 控件 。 制 作 组 合 控件 必须 继承 Fl_Group 类 .不 继承 Fl _ Group 类 
当然 也 可 能 可 以 制作 一 个 组 合 控件 ， 但 是 你 还 是 要 重新 写 F|_Group 类 里 面 的 工作 


子 控件 可 能 在 类 里 面 声明 


class MyClass : public Fl_Group 


Fl_Button the_button; 
Fl_Slider the_slider; 


HERRE Aba EFH, {ШПНЕН 5 ВЈааа() 1огоир, A AFI Group h E 3 
В T begin(). E H ERA јо, 39 Непа() 4% 


MyClass: :MyClass(int x, int y, int w, int h) : 
Fl_Group(x, y, w, h), 

the_button(x + 5, y + 5, 100, 20), 
the_slider(x, y + 50, w, 20) 


... (уои could add dynamically created child widgets here)... 
end(); // don't forget to do this! 


